Those of us who blog, while writing tutorial type content, feel the need to share various source codes on our blog. Then a common problem arises. Codebox is needed for code sharing. Where all types of code can be shared. For example: HTML, CSS, JAVASCRIPT,PHP etc.
To share any kind of source code in Blogger we need to add codebox script separately inside our theme. Through this we can create custom codebox in our blogger blog. We add many types of features in our blog for the convenience of our blog visitors. To visit the website and read the content on the website.
I have shared in a previous post how to create a codebox with copy button to share source code in blogger. If you want you can click here to see the previous post.
Today in this post I will share how you can create codebox with copy and download button to easily share source code on your blogger blog. If you share source code inside this codebox visitors can copy source code and also download as file if they want. Separate for download. No need to do anything. Just click on the download button and the source code will be downloaded as a txt file.
But for this we don't have to save the source code in a txt file and upload it again. The file will be created and downloaded automatically. We just need to add the script inside the blog theme.
The advantage of the code box for sharing this source code is that we don't have to bother selecting and copying the source code. You may have encountered a problem while copying the source code from many blogs, that is, there is a lot of difficulty in selecting and copying. Again. If you forget to click somewhere else from the middle, you have to select and copy from the beginning again.
This codebox script comes in handy to avoid this problem. Let's see how to create codebox with download button and copy button in blogger.
How to make codebox with download and copy button in blogger:
- Go firstBlogger DashboardA.
- Then go to Themes .
- Click on Edit HTML from the drop-down menu .
- Now search inside your theme for ]]></b:skin> or /*]]>*/</style> .
- Copy and paste the following CSS codes before the ]]></b:skin> or /*]]>*/</style> tag.
/* Code Box by Blogpen.xyz */ .pre{background:#f6f6f6;color:#2f3337;direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto}
.pre pre{margin:0;color:inherit;background:inherit;display:block;position:relative;font-size:13px;line-height:1.6em;border-radius:3px;padding:30px 20px 20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre}
.pre.adv{border-radius:10px}
.pre.adv::before{display:none}
.pre:not(.str) .prCd{display:none}
.pre.str .prTl{display:none;}
.pre.adv pre{padding-top:60px}
.preM{position:absolute;top:0;right:0;left:0;width:100%;background: rgba(0,0,0,.04);padding:10px 10px 10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;z-index:2}
.preT{font-size:12px;font-family: var(--fontC);line-height:1rem;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:10px;}
.preA{display:flex;gap:8px;white-space:nowrap;}
.preA button{outline:none;border:none;width:30px;height:30px;background:#d9d9d9;padding:0;margin:0;border-radius:50%;transition:border-radius .2s ease;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.preA button:hover{border-radius:40%;}
.preA button >svg{width:18px;height:18px;stroke:none;fill:#2e2e2e;transition: all .5s ease;}
.pre.cpd .prCp svg, .pre.pnd .prDl svg, .pre.dwn .prDl svg{animation: jiggle 1s}
.pre.cpd .prCp svg .a,.pre:not(.cpd) .prCp svg .b{opacity:0}
.pre.dwn .prDl svg .a, .pre.pnd .prDl svg .a,.pre:not(.pnd) .prDl svg .b,.pre:not(.dwn) .prDl svg .c{opacity:0}
@keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}
@-webkit-keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}Replace your theme's dark mode class with .drk. Otherwise, CSS will not work in dark mode.
- Now find the </body> tag and paste the following JavaScript codes in front of the </body> tag.
<script>/*<![CDATA[*/
0<document.querySelectorAll('div.pre.nb').length&&(() => {
let preD = document.querySelectorAll('div.pre.nb');
function saveDoc(x, d, n) {
if (n = typeof n == 'string' ? n : 'text/plain', d = typeof d == 'string' ? d : 'File_' + (new Date).getTime() + '.txt', x) {
n = new Blob([x], {
type: n
});
if (navigator.msSaveBlob) return navigator.msSaveBlob(n, d); {
let x = window.URL.createObjectURL(n),
c = document.createElement("a");
c.classList.add('hidden'), c.href = x, c.download = d, document.body.appendChild(c), c.click(), c.remove(), window.URL.revokeObjectURL(x)
}
}
}
for (let r = 0; r < preD.length; r++) {
let b = preD[r];
b.classList.add('adv');
let x = b.dataset.text || 'File_' + (new Date).getTime(),
e = b.dataset.file || x,
_ = b.dataset.lang || '.txt',
m = 'undefined' !== typeof b.dataset.time ? isNaN(Number(b.dataset.time)) ? 'false' === b.dataset.time ? 0 : 10 : Number(b.dataset.time) : 10,
c = 'undefined' === typeof b.dataset.download || b.dataset.download == 'true',
d = 'undefined' === typeof b.dataset.copy || b.dataset.copy == 'true',
n = 'undefined' === typeof b.dataset.view || b.dataset.view == 'true',
a = b.querySelector('pre'),
t = a.innerText;
b.insertAdjacentHTML('afterbegin', "<div class='preM'><div class='preT'><span class='prTl'>" + (null == x ? '</>' : x) + "</span><span class='prCd'></span></div><div class='preA'>" + (n ? '\x3C!--[ Prev' + "iew ]--><button class='prVw'><svg viewBox='0 0 24 24'><path d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/></svg></button>" : "") + (c ? "\x3C!--[ Download ]--><button class='prDl'><svg viewBox='0 0 24 24'><path class='a' d='M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z'/><path class='b' d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z'/><path class='c' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M7,15H17V17H7V15M10.3,11.2L8.4,9.3L7,10.7L10.3,14L17,7.3L15.6,5.9L10.3,11.2Z'/></svg></button>" : "") + (d ? "\x3C!--[ Copy ]--><button class='prCp'><svg viewBox='0 0 24 24'><path class='a' d='M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/><path class='b' d='M20,16V10H22V16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H16V4H8V16H20M10.91,7.08L14,10.17L20.59,3.58L22,5L14,13L9.5,8.5L10.91,7.08M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/></svg></button>" : "") + '</div></di' + "v>");
let i = b.querySelector('.prVw'),
l = b.querySelector('.prDl'),
f = b.querySelector('.prCp'),
W = b.querySelector('.prCd');
null !== i && i.addEventListener('click', () => {
var x = '#252526';
x = '<!DOCTYPE html><html><head><title>' + e.replace(/\./g, "").replace(/ /g, "_") + _ + "</title><meta content='width=device-width,initial-scale=1,user-scalable=1,minimum-scale=1,maximum-scale=5' name='viewport'/><meta content='" + x + "' name='theme-color'/><meta content='" + x + "' name='msapplication-navbutton-color'/><meta content='" + x + "' name='apple-mobile-web-app-status-bar-style'/><link rel='shortcut icon' type='image/png' href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2ytKJJvyxZVhBy0MeWiFJKojSTigR33J6ZxcroTM8aNg1bv-G7Zg0Czpu1t6cq7Q56PuCsmK1Q5IntwA0qdrdI9Fvnw5Otjt75r-hfVYP8ncPBdxXHHu5p8RAf67SCoSd9SqfcbTt9WPfn-OiOCU_7fucSq61kZqXRrZ0aqW7AMuvFWDPKwzUHT8nw/s320/20221002_004326.png'><style>body{min-height:100vh;background:#252526;color:#fff}*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all;padding:20px}pre i{font-style:normal}</style></head><body><div class='pre'>" + a.outerHTML + '</div></body></html>';
x = new Blob([x], {
type: 'text/html'
});
window.navigator.msSaveOrOpenBlob ? window.navigator.msSaveOrOpenBlob(blobObject, fileName) : (x = window.URL.createObjectURL(x), window.open(x, '_blank'), window.URL.revokeObjectURL(x))
}),
null !== l && l.addEventListener('click', () => {
l.disabled = !0;
let c = m;
b.classList.add('pnd', 'str'), W.innerHTML = 0 !== m ? 'Please wai' + "t " + c + 's...' : 'Please wai' + 't...';
let a = setInterval(() => {
0 !== m && --c, 0 !== m &&(W.innerHTML = 'Please wait ' + c + 's...'), c <= 0 && (clearInterval(a), setTimeout((); ) => {
W.innerHTML = 'Downloading...', setTimeout(() => {
b.classList.remove('pnd'), b.classList.add('dwn'), saveDoc(t, e.replace(/\./g, "").replace(/ /g, "_") + '_by_The_Pro_Project' + _, 'text/plain'), W.innerHTML = 'Download started...', setTimeout(() => {
b.classList.remove('dwn', 'str'), l.disabled = !1
}, 3e3)
}, 2e3)
}, 1e3))
}, 1e3)
}),
null !== f && f.addEventListener('click', () => {
var x = getSelection(),
c = document.createRange();
c.selectNodeContents(a), x.removeAllRanges(), x.addRange(c), document.execCommand('copy'), x.removeAllRanges(), f.disabled = !0, b.classList.add('cpd'), setTimeout(function() {
b.classList.remove('cpd'), f.disabled = !1
}, 3e3)
})
}})();
/*]]>*/</script>- Now save the theme.
Our work inside the theme is finished. Later when you share the source code in a post, first parse the source code. I have shared HTML Parser script with which you can create HTML Parser tool for your blog. Check out profile. Or if you wantBy clicking here You can parse html .
Special Note: If the source codes are not parsed , they will not be displayed as text inside the codebox. On the contrary, the codes will be displayed as output. So parse them first .
Now to share the source code, go to the HTML view of the post . And paste the following codes where you want to share the source code inside the codebox. Paste your parsed source code in place of < – Code –> .
<div class='pre nb' data-text='typecode' data-file='filename' data-lang='fileformat' data-time='true' data-download='true' data-copy='true' data-view='true'> <pre> <!-- Code --> </pre> </div>
Vyas. Now publish the post. When you see the preview you will see the source code is visible inside the codebox and there are copy and download buttons.
Below I have given the short docs of this codebox. If you want, you can follow this and customize the codebox as you wish.
data-textis the type of code, e.g. CSS, HTML or JavaScriptdata-fileis the download name of Filedata-langis the format of the file, for example: .css, .js, .html, .txt .
If it is not changed it will remember the default which is.txtdata-downloadis to show download button true or falsedata-copyis to show copy button true or falsedata-viewis to show preview button true or falsedata-download,data-copy,data-viewthese three changes are not necessary.<!-- Code -->Enter your code here- If you write direct html code here it won’t do a work. You need to use HTML PARSER to change the html code
